<!--
 * @Author: pmy
 * @Date: 2021-09-02 14:39:12
 * @LastEditTime: 2022-11-25 09:57:21
 * @LastEditors: pmy
 * @Description: 淘客报表-table
 * @FilePath: \bdcar-net\src\components\table\baseTable.vue
-->
<template>
  <div class="tablePage" v-loading="loading">
    <div class="search">

      <!--？？ 遗留问题： 品牌名需要改成表的去重选项 -->
      <div class="header-query">
        <span class="search-text">竞品品牌名</span>
        <el-select v-model="query.competingBrandName" type="input" placeholder="" filterable class="search-input"
          @change="pagination.currentPage = 1; getTableData()">
          <el-option v-for="vv in optionList.competingBrandName" :key="vv.value" :label="vv.label"
            :value="vv.value"></el-option>
        </el-select>
      </div>

      <div class="header-query">
        <span class="search-text">是否合计</span>
        <el-select v-model="query.whetherSum" placeholder="" filterable class="search-input">
          <el-option v-for="vv in optionList.whetherSum" :key="vv.value" :label="vv.label"
            :value="vv.value"></el-option>
        </el-select>
      </div>

      <div class="header-query" v-show="query.whetherSum == '是'">
        <span class="search-text">时间粒度</span>
        <el-select v-model="query.unit" placeholder="" filterable class="search-input" @change="handleChangeTime">
          <el-option v-for="vv in optionList.unit" :key="vv.value" :label="vv.label" :value="vv.value"></el-option>
        </el-select>
      </div>

      <!-- <div class="header-query">
        <span class="search-text">时间粒度</span>
        <el-select clearable v-model="query.unit" placeholder="" class="search-input"
          @change="pagination.currentPage = 1;" @keyup.native.enter="pagination.currentPage = 1; getTableData()">
          <el-option v-for="vv in unit" :key="vv.value" :label="vv.label" :value="vv.value">
          </el-option>
        </el-select>
      </div> -->

      <!-- <div class="header-query">
        <span class="search-text">查询时间</span>
        <el-date-picker v-model="query.searchTime" type="daterange" :clearable="false" :picker-options="pickerOptions"
          class="search-input time-picker" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
        </el-date-picker>
      </div> -->

      <div class="header-query">
        <span class="search-text">开始时间</span>
        <el-date-picker v-model="query.beginDate" :type="timeType" :clearable="false" format="yyyy-MM-dd"
          class="search-input" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div class="header-query">
        <span class="search-text">结束时间</span>
        <el-date-picker v-model="query.endDate" :type="timeType" :clearable="false" format="yyyy-MM-dd"
          class="search-input" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
        </el-date-picker>
      </div>


      <div class="search-btn" @click="getTableData()" v-if="Btn.search">
        <div class="btn-img"></div>查询
      </div>
      <div class="export-btn" @click="handleClick(null, 'export')" v-if="Btn.export" v-loading="exportLoading">
        <div class="btn-img"></div>
        {{ !exportLoading ? "导出" : "导出中" }}
      </div>
      <div class="deletes-btn" @click="handleClick(null, 'deletes')" v-if="Btn.deletes"
        v-show="btnPermissionSearch('basicData', 'fileManage', 'deletes')">
        批量删除
      </div>

      <el-popover placement="top-start" title="展示字段" width="200" trigger="click" popper-class="my-popper">
        <el-checkbox v-model="allCheck" label="全选" @change="allCheckChange"></el-checkbox>
        <el-checkbox-group v-model="checkList" @change="setAllCheck">
          <el-checkbox v-for="v in tableItems" :label="v.name" :value="v.prop"></el-checkbox>
        </el-checkbox-group>
        <i class="el-icon-setting table-toggle" slot="reference"></i>
      </el-popover>
    </div>

    <!-- #region 排序相关 -->
    <div class="base-table">
      <el-table highlight-current-row ref="myTable" :data="tableData" @selection-change="handleSelectionChange"
        height="100%" @sort-change="handleSortChange">

        <el-table-column :prop="v.prop" :label="v.name" v-for="v in tableItems" :key="v.prop" show-overflow-tooltip
          sortable="custom" :header-align="v.align ?? 'right'" :align="v.align ?? 'right'">

          <!-- <template slot-scope="scope">
            <span v-if="scope.row[v.prop] != ''">{{ scope.row[v.prop] }}</span>
            <span v-else>---</span>
          </template> -->

          <!-- 指定用img标签来展示 -->
          <template slot-scope="scope">
            <el-image v-if="v.type == 'img'" :src="imgUrlPrefix + scope.row[v.prop]" style="width:3rem;height:3rem"
              :preview-src-list="[imgUrlPrefix + scope.row[v.prop]]" />

            <!-- 指定用link标签来展示链接 -->
            <el-link v-else-if="v.type == 'url'" :href="scope.row[v.prop]"  target="_blank" style="color: #409EFF">{{scope.row[v.prop]}}</el-link>

            <span v-else-if="scope.row[v.prop] !== ''">{{ scope.row[v.prop] }}</span>
            <span v-else>---</span>
          </template>




        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination :page-size="pagination.pageSize" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="pagination.currentPage" :total="pagination.total"
        :page-sizes="[15, 50, 100, 300]" background layout="total,sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <!-- 增删查改页面 -->
    <el-dialog v-dialogDrag :close-on-click-modal="false" :visible="showDialog" width="56rem"
      :before-close="closeDialog">
      <template #title>
        <div class='dialog-title'>
          <div class="cicle"></div>
          {{ dialogTitle[showWhich] }}
        </div>
      </template>
      <div class="body" v-if="!!showDialog" v-loading="uploading">
        <el-form :model="updateInfo" :inline="true" ref="addformRef" :rules="addformRules">
          <el-form-item v-for="v in updateItems" :key="v.prop" :label="v.name" :prop="v.prop">
            <el-input v-model="updateInfo[v.prop]" :disabled="showWhich == 'detail' || v.disabled"
              v-if="v.type == 'input'"></el-input>
            <el-input type="textarea" v-else-if="v.type == 'textarea'" :autosize="{ minRows: 2 }" placeholder="请输入内容"
              :disabled="showWhich == 'detail'" style="width:38rem" v-model="updateInfo[v.prop]"></el-input>
            <el-date-picker v-model="updateInfo[v.prop]" type="datetime" placeholder="选择时间"
              value-format="yyyy-MM-dd HH:mm:ss" :disabled="showWhich == 'detail'" v-else-if="v.type == 'time'">
            </el-date-picker>
            <el-select v-model="updateInfo[v.prop]" filterable clearable :disabled="showWhich == 'detail'"
              v-else-if="v.type == 'select'">
              <el-option v-for="item in optionList[v.prop]" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
            <treeSelect v-model="updateInfo[v.prop]" :data="optionList[v.prop]" v-else-if="v.type == 'cascader'"
              :disabled="showWhich == 'detail'" class="search-input"></treeSelect>
            <file-control ref="myFileControl" :fileHttp="ImportAPI" :getFileName="getFileName"
              :readOnly="showWhich == 'detail'" :downloadMethod="method.downloadMethod"
              :pFileList="updateInfo[v.prop] || []" :uploadMethod="method.uploadData"
              v-else-if="v.type == 'upload'"></file-control>
          </el-form-item>
        </el-form>
      </div>
      <div class="tool-bar">
        <div class="cancel-btn" @click="closeDialog">关闭</div>
        <div class="submit-btn" @click="handleSubmitFile" v-show="showWhich !== 'detail'">确定</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import treeSelect from "@/components/common/treeSelect"
import { service } from "../../services/backServices"
import FileControl from '@/components/common/FileControl.vue';
import { export_json_to_excel } from "@/assets/js/FilExport";
import dayjs from "dayjs";
export default {
  props: [
    // "query",//查询参数
    "updateItems",//增删查改的对象属性
    "optionList",//增删查改的对象属性的下拉select或者级联casual
    "Btn",//自定义btn功能
    "methodParam",//方法参数
    "menuName",//权限-菜单名称
    "pageName",//权限-页面名称
    "imgUrlPrefix",
  ],
  components: { treeSelect, FileControl },
  data() {
    return {

      //#region 排序相关
      sortCol: "数据统计时间",
      orderCol: null,
      //#endregion

      unit: [
        { label: "日", value: "日" },
        { label: "周", value: "周" },
        { label: "月", value: "月" },
        { label: "年", value: "年" },
      ],
      query: {
        whetherSum: "否",
        competingBrandName: "",
        unit: "日",
        // searchTime: GlobalSetting.fakeTime ?? [dayjs(new Date()).add(-1, 'days').format("YYYY-MM-DD"), dayjs(new Date()).format("YYYY-MM-DD")],
        // searchTime: [dayjs(new Date()).add(-1, 'days').format("YYYY-MM-DD"), dayjs(new Date()).format("YYYY-MM-DD")],
        beginDate: dayjs(new Date()).add(-4, "day").format("YYYY-MM-DD"),
        endDate: dayjs(new Date()).add(-1, "day").format("YYYY-MM-DD"),
      },
      tableAllData: [],
      sortCol: "数据统计时间",
      orderCol: null,
      uploading: false,
      exportLoading: false,
      loading: false,
      unitIsDay: true,
      method: {},
      //表格参数
      pagination: {
        total: 0,
        currentPage: 1,
        pageSize: 15,
      },
      multipleSelection: [],
      tableData: [],
      showWhich: "",
      updateInfo: {
        fileName: ''
      },
      params: {},
      cascaderSet: {
        value: 'value',
        emitPath: false,
        checkStrictly: false,
        expandTrigger: 'hover',
        multiple: false
      },
      addformRules: {
        fileName: [
          { required: true, message: '文件名称', trigger: 'blur' },
        ],
        fileAdd: [
          { required: true, message: '上传文件', trigger: 'blur' },
        ],
        uploadType: [
          { required: true, message: '上传类型', trigger: 'change' },
        ]
      },
      pickerOptions: {

        disabledDate: (time) => {
          return time.getTime() > Date.now() - 8.64e7;
        },
      },
      dialogTitle: {
        add: "新增",
        edit: "编辑",
        detail: "详情"
      },
      showDialog: false,
      tableItems: [],
      checkList: [],
      allCheck: true,
    };
  },
  computed: {
    tableHead() {
      this.$nextTick(() => { //在数据加载完，重新渲染表格
        this.$refs['myTable'].doLayout();
      })
      return this.tableItems.filter(v => {
        return this.checkList.includes(v.prop)
      })
    },
    ImportAPI() {
      return GlobalSetting.IotConfig.ftpAPIService;
    },
  },
  created() {
    this.getCompetingBrandName()

    let _this = this;
    _this.method.addData = async function (model) {
      return service({
        headers: {
          'Content-Type': 'application/json'
        },
        method: 'post',
        url: _this.methodParam + "/save",
        data: model,
      });
    };
    _this.method.editData = async function editTrashOverflowData(model) {
      return service({
        headers: {
          'Content-Type': 'application/json'
        },
        method: 'post',
        url: _this.methodParam + "/update",
        data: model,
      });
    };
    _this.method.deleteData = async function (id) {
      let url = _this.methodParam + "/remove";
      return service({
        method: 'post',
        url: url,
        params: {
          id: id
        },
      });
    };
    _this.method.deleteDatas = async function (ids) {
      return service({
        method: 'post',
        url: _this.methodParam + "/batchRemove",
        params: {
          ids: ids
        },
        paramsSerializer: params => {
          return qs.stringify(params, {
            indices: false
          })
        }
      });
    };
    _this.method.uploadData = async function (data) {
      return service({
        headers: {
          'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryqs8javp5GsOgKvoQ'
        },
        method: 'post',
        url: _this.methodParam + "/upload",
        data: data,
        params: {
          uploadType: _this.updateInfo.uploadType
        }
      });
    };
    _this.method.downloadMethod = async function (url) {
      return service({
        method: 'post',
        url: _this.methodParam + "/download",
        responseType: 'blob',
        data: {
          url: url
        },
      });
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {

    // 查询条件 获取竞品品牌名
    getCompetingBrandName() {
      service({
        url: "getAllCompetingBrandName",
        method: "post"
      }).then(res => {
        // this.optionList.competingBrandName = [
        //   { label: "abc", value: "abc" },   //默认为空，可查全部
        // ]
        if (res.data.code == 200) {
          res.data.data.forEach(v => {
            this.optionList.competingBrandName.push({ label: v, value: v })
          })
        }
      })
    },


    setAllCheck() {
      this.allCheck = this.checkList.length == this.tableItems.length
    },
    allCheckChange(val) {
      if (val) {
        this.checkList = this.tableItems.map(v => {
          return v.prop
        })
      } else {
        this.checkList = []
      }
    },
    getTableHead(query) {
      // 调用接口url修改 跟推广报表相同！！
      //getTmallPromotionSumData
      if (query.whetherSum == '否') {
        this.tableItems = [
          { name: "数据统计时间", prop: "数据统计时间", align: "left" },
          { name: "竞品品牌名", prop: "竞品品牌名", align: "left" },
          { name: "竞品店铺名称", prop: "竞品店铺名称", align: "left" },
          { name: "大淘客推广链接", prop: "大淘客推广链接", type: "url", align: "left" },
          { name: "推广主图", prop: "推广主图", align: "left", type: "img" },
          { name: "推广主图链接", prop: "推广主图链接", type: "url", align: "left" },
          { name: "优惠券金额", prop: "优惠券金额" },
          { name: "商品券后价", prop: "商品券后价" },
          { name: "佣金比例", prop: "佣金比例" },
          { name: "微信推广文案", prop: "微信推广文案", align: "left" },
          { name: "社群名称", prop: "社群名称", align: "left" },
          { name: "推广商品链接", prop: "推广商品链接", type: "url", align: "left" },
          { name: "当日热销", prop: "当日热销" },
          { name: "当日销售额", prop: "当日销售额" },
        ]
      } else {
        switch (query.unit) {
          case '日':
            this.tableItems = [
              { name: "数据统计时间", prop: "数据统计时间", align: "left" },
              { name: "竞品品牌名", prop: "竞品品牌名", align: "left" },
              { name: "平均优惠券金额", prop: "平均优惠券金额", align: "right" },
              { name: "平均佣金比例", prop: "平均佣金比例", align: "right" },
              { name: "平均商品券后价", prop: "平均商品券后价", align: "right" },
              { name: "总当日热销", prop: "总当日热销", align: "right" },
              { name: "总当日销售额", prop: "总当日销售额", align: "right" },
              { name: "推广商品数", prop: "good_count", align: "right" }
            ]
            break;
          case '周':
            this.tableItems = [
              { name: "数据统计时间", prop: "数据统计时间", align: "left" },
              { name: "竞品品牌名", prop: "竞品品牌名", align: "left" },
              { name: "平均优惠券金额", prop: "平均优惠券金额", align: "right" },
              { name: "平均佣金比例", prop: "平均佣金比例", align: "right" },
              { name: "平均商品券后价", prop: "平均商品券后价", align: "right" },
              { name: "总当日热销", prop: "总当日热销", align: "right" },
              { name: "总当日销售额", prop: "总当日销售额", align: "right" },
              { name: "推广商品数", prop: "good_count", align: "right" }
            ]
            break;
          case '月':
            this.tableItems = [
              { name: "数据统计时间", prop: "数据统计时间", align: "left" },
              { name: "竞品品牌名", prop: "竞品品牌名", align: "left" },
              { name: "平均优惠券金额", prop: "平均优惠券金额", align: "right" },
              { name: "平均佣金比例", prop: "平均佣金比例", align: "right" },
              { name: "平均商品券后价", prop: "平均商品券后价", align: "right" },
              { name: "总当日热销", prop: "总当日热销", align: "right" },
              { name: "总当日销售额", prop: "总当日销售额", align: "right" },
              { name: "推广商品数", prop: "good_count", align: "right" }
            ]
            break;
          case '年':
            this.tableItems = [
              { name: "数据统计时间", prop: "数据统计时间", align: "left" },
              { name: "竞品品牌名", prop: "竞品品牌名", align: "left" },
              { name: "平均优惠券金额", prop: "平均优惠券金额", align: "right" },
              { name: "平均佣金比例", prop: "平均佣金比例", align: "right" },
              { name: "平均商品券后价", prop: "平均商品券后价", align: "right" },
              { name: "总当日热销", prop: "总当日热销", align: "right" },
              { name: "总当日销售额", prop: "总当日销售额", align: "right" },
              { name: "推广商品数", prop: "good_count", align: "right" }
            ]
            break;
          default:
            break;
        }
      }
      debugger
      this.checkList = this.tableItems.map(v => {
        return v.prop
      })
    },
    setTableData() {
      this.tableData = this.tableAllData.slice(
        (this.pagination.currentPage - 1) * this.pagination.pageSize,
        this.pagination.currentPage * this.pagination.pageSize
      )

    },
    //表格参数改变触发
    handleSizeChange: function (val) {
      this.pagination.pageSize = val;
      this.setTableData();
    },
    handleCurrentChange: function (currentPage) {
      this.pagination.currentPage = currentPage;
      this.setTableData();
    },
    handleSortChange({ prop, order }) {
      this.sortCol = prop;
      this.orderCol = order;
      this.getTableData()
    },

    //#region 排序相关
    handleSortChange({ prop, order }) {
      this.sortCol = prop;
      this.orderCol = order;
      this.getTableData()
    },
    //#endregion

    //修改粒度方法
    handleChangeTime(val) {
      this.pagination.currentPage = 1;
      this.getTableData()
      let timeHash = {
        年: 'year',
        月: 'month',
        // 周: 'week',
        周: 'date',
        日: 'date',
      }
      this.timeType = timeHash[val]
    },



    getTableData() {
      let _this = this
      this.loading = true
      for (let key in this.query) {
        this.params[key] = this.query[key]
      }
      function getParam(query) {
        let myForm = new FormData()
        Object.keys(query).forEach((key) => {
          // if (key == "unit")
          //   _this.unitIsDay = query[key] == '日'
          // if (key == "whetherSum") return
          if (Array.isArray(query[key]) && key.search(/[Tt]ime/) !== -1) {
            myForm.append('beginDate', query[key].length ? query[key][0] : '')
            myForm.append('endDate', query[key].length ? query[key][1] : '')
          } else if (query[key] !== "") {
            myForm.append(key, query[key])
          }
        })
        //#region 排序相关（放在myForm之后）
        if (_this.sortCol != null) {
          myForm.append('sortBy', _this.sortCol)
        }
        if (_this.orderCol == 'ascending') {
          myForm.append('asc', 1)
        }
        //#endregion

        return myForm
      };
      let myForm = getParam(this.query)
      _this.getTableHead(this.query);
      let url = _this.methodParam;
      service({
        url: url,
        method: "post",
        data: myForm
      }).then(response => {
        this.loading = false
        if (response.data.code == 200) {
          this.tableAllData = response.data.data;
          this.pagination.total = response.data.data.length;
          if (this.tableData.length == 0 && this.pagination.currentPage != 1) {
            this.pagination.currentPage = 1;
            this.getTableData();
          }
        } else {
          this.tableAllData = [];
          this.pagination.total = 0;
          this.pagination.currentPage = 1;
        }
        this.setTableData();
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];
      val.forEach(v => {
        this.multipleSelection.push(v.id);
      })
    },
    getFileName(val) {
      let title = ''
      if (val && val.length > 0) {
        for (let i = 0; i < val.length - 1; i++) {
          title += val[i]
        }
      } else {
        title = ''
      }
      this.updateInfo.fileName = title
      this.$forceUpdate();
    },
    // 增删改查
    handleClick(row, obj) {
      if (this.uploading) {
        this.$message({
          message: '存在正在上传的文件，请等待数据上传成功再试',
          type: 'warning'
        });
        return
      }
      switch (obj) {
        case "add":
          this.updateInfo = {};
          this.showWhich = obj;
          this.showDialog = true
          this.$nextTick(() => {
            this.$refs.addformRef.clearValidate();
          })
          break;
        case "edit":
          this.updateInfo = JSON.parse(JSON.stringify(row));
          this.showWhich = obj;
          this.showDialog = true
          this.$nextTick(() => {
            this.$refs.addformRef.clearValidate();
          })
          break;
        case "detail":
          this.updateInfo = JSON.parse(JSON.stringify(row));
          this.showWhich = obj;
          this.showDialog = true
          break;
        case "delete":
          this.deleteData(row.id);
          break;
        case "deleteMany":
          this.deleteManyData();
          break;
        case "export":
          this.exportTable();
          break;
        default:
          break;
      }
    },
    handleSubmitFile() {
      if (!this.updateInfo.uploadType && this.updateInfo.uploadType != 0) {
        this.$message({
          message: '上传类型不能为空',
          type: 'warning'
        });
        return
      }
      this.handleSubmit();
      // this.$refs.addformRef.validate((valid) => {
      //   if (valid) {
      //     this.handleSubmit();
      //   }
      // })
    },
    //提交事件
    async handleSubmit() {
      let _this = this;
      const fileDom = this.$refs.myFileControl
      if (fileDom && fileDom[0]) {
        this.uploading = true
        let fileList = await fileDom[0].uploadInfo(), propName = 'file'
        this.uploading = false
        if (!!fileList) {
          _this.updateInfo[propName + 'AddStr'] = JSON.stringify(fileList);   //去掉最后一个逗号避免后端报错，再加上中括号构造json字符串          
          _this.updateInfo['fileName'] = fileList[0].name;    //从上传的文件中读取文件名
        }
        if (fileDom[0]?.delFileList?.length > 0) {       // 将删除的图片由数组转为字符串拼接
          _this.updateInfo[propName + 'DelStr'] = JSON.stringify(fileDom[0].delFileList)
        }
      }
      if (!_this.updateInfo.fileName) {
        this.$message({
          message: '文件不能为空',
          type: 'warning'
        });
        return
      }
      switch (this.showWhich) {
        case 'add':
          this.addInfo();
          break;
        case 'edit':
          this.editInfo();
          break;
      }
    },
    addInfo() {
      let _this = this;
      this.method.addData(_this.updateInfo).then(function (response) {
        if (response.data.code == 0) {
          _this.getTableData();
          _this.showWhich = "";
          _this.showDialog = false
          _this.$notify({
            message: "信息保存成功！",
            type: "success",
            position: "bottom-right",
            duration: 2000,
          });
        }
      }).catch(function (error) {
        _this.$notify({
          message: "信息保存失败！",
          type: "error",
          position: "bottom-right",
          duration: 2000,
        });
        console.log(error)
      });
    },
    editInfo() {
      let _this = this;
      this.method.editData(_this.updateInfo).then(function (response) {
        if (response.data.code == 0) {
          _this.getTableData();
          _this.showWhich = "";
          _this.showDialog = false
          _this.$notify({
            message: "信息保存成功！",
            type: "success",
            position: "bottom-right",
            duration: 2000,
          });
        }
      }).catch(function (error) {
        _this.$notify({
          message: "信息保存失败！",
          type: "error",
          position: "bottom-right",
          duration: 2000,
        });
        console.log(error)
      });
    },
    deleteData(id) {
      this.$confirm("此操作将删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let _this = this;
        _this.method.deleteData(id).then(function (response) {
          if (response.data.code == 0) {
            _this.getTableData();
            _this.showWhich = "";
            _this.showDialog = false
            _this.$notify({
              message: "信息删除成功！",
              type: "success",
              position: "bottom-right",
              duration: 2000,
            });
          }
        })
      })
    },
    deleteManyData() {
      let _this = this;
      if (_this.multipleSelection.length > 0) {
        _this.$confirm("此操作将删除该项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          _this.method.deleteDatas(_this.multipleSelection).then(function (response) {
            if (response.data.code == 0) {
              _this.getTableData();
              _this.showWhich = "";
              _this.showDialog = false
              _this.$notify({
                message: "信息删除成功！",
                type: "success",
                position: "bottom-right",
                duration: 2000,
              });
            }
          })
        })
      } else {
        this.$notify({
          message: "请至少选择一项",
          type: "error",
          position: "bottom-right",
          duration: 2000,
        });
      }
    },
    closeDialog() {
      this.showDialog = false
    },
    exportTable() {
      this.exportLoading = true;
      let _this = this;

      if (this.tableAllData.length <= 0) {
        _this.$notify({
          message: "当前数据为空",
          type: "error",
          position: "bottom-right",
          duration: 1000,
        });
        this.exportLoading = false;
        return;
      }
      let filename = "" + dayjs().format("YYYY-MM-DD HH:ss:mm");
      let multiHeader = []; //标题设置
      let tHeader = [], filterVal = [];

      _this.tableItems.forEach(v => {
        tHeader.push(v.name);
        filterVal.push(v.prop);
      })
      let jsonData = this.tableAllData;
      let merges = []; // 合并单元格
      export_json_to_excel({
        multiHeader,
        header: tHeader,
        merges,
        filterVal,
        jsonData,
        filename: filename,
        autoWidth: 30,
        bookType: "xlsx",
      });
      this.exportLoading = false;
    },
  },

  activated() {
    let _this = this;
    _this.$nextTick(() => {
      _this.$refs.myTable.doLayout();
    })
  }
}
</script>
<style lang="less" scoped>
.search-text {
  width: 80px !important;
}

.search {
  .search-input {
    width: 140px;
  }
}
</style>